// main content header

body.caerp .main_header {
	background: var(--theme-color);
	color: var(--theme-text-color);
	flex: 0 0 3.5rem;
	position: relative;

	h1 {
		font-size: 1.25rem;
		line-height: 1.125;
		max-height: 3.5rem;
		overflow: hidden;
		padding: 0;

		&::first-line {
			font-size: 1.5rem;
			line-height: 1.25;
		}

		.icon {
			background: var(--icon-neutral-color);
			border-radius: .25rem;
			display: inline-block;
			height: 2rem;
			margin-right: .25rem;
			padding: .25rem;
			vertical-align: text-top;
			width: 2rem;

			svg {
				fill: var(--static-invert-color);
				height: 1.5rem;
				vertical-align: text-top;
				width: 1.5rem;
			}

			&.valid,
			&.resulted,
			&.paid {
				background: var(--func-positive-color);
			}

			&.invalid {
				background: var(--func-negative-color);
			}

			&.caution {
				background: var(--func-caution-color);

				svg {
					fill: var(--svg-invert-fill-color);
				}
			}

			&.wait {
				background: var(--func-neutral-color);
			}
		}

		small {
			font-size: .75em;
			font-weight: normal;
		}
	}

	&.positive {
		background: var(--func-positive-color) !important;
	}

	&.negative {
		background: var(--func-negative-color) !important;
	}

	.header_content {
		align-items: center;
		height: 100%;
		justify-content: space-between;
		max-width: calc(100% - 3rem);

		&.layout.flex {
			flex-wrap: nowrap;
		}

		>svg:first-child {
			fill: var(--theme-text-color);
			height: 1.75rem;
			left: -.75rem;
			position: absolute;
			top: .875rem;
			width: 1.75rem;
			z-index: 0;
		}

		>svg.valid:first-child,
		>svg.resulted:first-child,
		>svg.paid:first-child {
			fill: var(--func-positive-color);
		}

		>svg.invalid:first-child {
			fill: var(--func-negative-color);
		}

		>svg.caution:first-child {
			fill: var(--func-caution-color);
		}

		>svg.wait:first-child {
			fill: var(--func-neutral-color);
		}
	}

	button.unstyled:not(:disabled):hover,
	button.unstyled:not(:disabled):focus,
	button.unstyled:not(:disabled):active {
		background: none;
	}
}

@media (min-width: $desktopWidth ) {
	body.caerp .main_header {
		padding: 0 var(--variable-horizontal-padding-m);

		.header_content>svg:first-child {
			left: -.5rem;
		}
	}
}

@media (max-width: $desktopWidth ) {
	body.caerp .main_header {
		padding: 0 var(--variable-horizontal-padding-s);
	}
}

@media (max-width: $mobileWidth ) {
	body.caerp .main_header {
		padding: 0 var(--variable-horizontal-padding-xs) 0 var(--variable-horizontal-padding-l);

		svg[class^="theme"] {
			position: static;
			vertical-align: text-bottom;
		}

		.header_content {
			max-width: calc(100vw - 3.4375rem);

			>div:first-child {
				flex-basis: calc(100vw - 6.5rem);
				max-width: calc(100vw - 6.5rem);

				h1 {
					max-width: 100%;
				}
			}
		}
	}
}

body.caerp.theme_manage_people .main_header {
	svg.theme_people {
		display: inline-block;
	}
}

body.caerp.theme_manage_entity .main_header {
	svg.theme_entity {
		display: inline-block;
	}
}

@media print {

	// styles used when printing pages
	body.caerp .main_header {
		padding: 0;
	}
}